<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器优先级</title>
    <style>
        
        /* .box{
            color: blue;
        }
        div{
            color: red;
        } */
        /* #text{
            color: green;
        }
        div{
            color: blue;
        }
        .box{
            color: red;
        } */
        /* div.box{
            color: red;
        } */
        /* .box > .s1{
            color: red;
        }
        .s1{
            color: blue;
        } */
        /* 101 */
        span#t1{
            color: green;
        }
        /* 100 */
        #t1{
            color: blue;
        }
        /* 22 */
        div.box span.s1{
            color: red;
        }
        span{
            color: yellowgreen !important;
        }
        

    </style>
</head>
<body>
    <!-- 选择器优先级 -->
    <!-- 1.顺序 -->
    <!-- 2.特殊性
     1.id > class > 标签
     2.多个大于单个
    -->
    <!-- 3.元素的style属性 -->
    <!-- 4.!important -->
    <div class="box" id="text">
        <span class="s1" id="t1">
            Hello world
        </span>
       
    </div>
    <span class="s1" id="t1" style="color: violet;">
        Hello Html
    </span>
</body>
</html>